<template>
  <div class="scrollTop-wrap">
    <!-- 回到顶部 -->
    <img
      src="../../assets/img/storePage/编组 8@3x.png"
      alt
      class="go-top"
      @click="backTop()"
      v-if="btnFlag"
    />
    <!-- 商店详情 -->
    <div class="shop-details">
      <!-- 商店头部标题 -->
      <div class="shop-head">
        <div class="shop-head-l">
          <van-icon name="arrow-left" color="#D8D8D8FF" @click="$router.back(-1)" />
          <h2>Grodear 女士服装店</h2>
        </div>
        <div class="shop-head-r">
          <van-icon name="star-o" color="#fff" />
          <div class="line"></div>
          <van-icon name="share" color="#fff" />
        </div>
      </div>
      <!-- 商品浏览记录 -->
      <div class="shop-tag">
        <div class="shop-type">
          <div class="shop-borwse">浏览:1232</div>
          <van-tag color="#FF4674FF">女装</van-tag>
          <van-tag color="#46A8FFFF">男装</van-tag>
        </div>
      </div>
      <h3>南山区 南油服装城A1011</h3>
      <!-- 自定义标签 -->
      <div class="custom-tag">
        <van-tag color="#C30C22FF" plain v-for="(item,i) in 3" :key="i">自定义标签</van-tag>
      </div>
      <!-- 轮播图 -->
      <div class="slideshow">
        <van-swipe :autoplay="3000" indicator-color="#aca49e" touchable show-indicators>
          <van-swipe-item>
            <img
              style="border-radius: 10px;"
              src="http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/86498/18/9280/99902/5e0dade6Ed9fa0774/8d24c2df59b2e4b5.jpg!cr_1125x445_0_171!q70.jpg"
              alt
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 店铺描述 -->
      <p
        class="shop-brief"
      >分形几何不仅展示了数学之美，也揭示了世界的本质，还改变了人们理解自然奥秘的方式；可以说分形几何是真正描述大自然的几何学，对它的研究也极大地拓展了人类的认知疆域</p>
      <div class="shop-site">
        <div style="width:20px;margin-right:10px;">
          <van-icon name="location-o" color="#787878FF" size="20px" />
        </div>
        <p>深圳市南山区南山街道登良社区南海大道2061号新保辉大厦主体楼,辅楼主...</p>
        <div class="contact-way">
          <div class="image-text" @click="openWechat">
            <van-icon name="play-circle" color="#BE0F1DFF" />
            <span>视频</span>
          </div>
          <div class="image-text" @click="openWechat">
            <img src="../../assets/img/storePage/wechat@3x.png" alt />
            <span>微信</span>
          </div>
          <div class="image-text" @click="openPhone">
            <img src="../../assets/img/storePage/phone@3x.png" alt />
            <span>电话</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间阴影 -->
    <div class="midfeather"></div>
    <!-- 自媒体板块 -->
    <div class="we-media">
      <div class="media-head">
        <span class="media-head-l">自媒体</span>
        <div class="media-head-r">
          <span class="media-head-r-text">查看更多</span>
          <van-icon name="arrow" color="#787878FF" />
        </div>
      </div>
      <van-grid :column-num="3">
        <van-grid-item v-for="(item,i) in weMeidaLis" :key="i" :text="item.name">
          <img :src="item.photo" alt slot="icon" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 网店 -->
    <div class="we-media">
      <div class="media-head">
        <span class="media-head-l">网店</span>
      </div>
      <van-grid :column-num="3">
        <van-grid-item v-for="(item,i) in onlineStoreList" :key="i" :text="item.name">
          <img :src="item.photo" alt slot="icon" />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="midfeather"></div>
    <!-- tab栏 -->
    <van-tabs v-model="active" sticky color="#ff5532">
      <van-tab v-for="index in tabsList" :title="'' + index" :key="index">
        <waterfallLayout></waterfallLayout>
      </van-tab>
    </van-tabs>
    <!-- 微信弹出框 -->
    <van-dialog v-model="show" z-index="999" :showConfirmButton="false" close-on-click-overlay>
      <div class="wrapper">
        <div class="block">
          <img src="../../assets/img/storePage/wechat.png" alt />
          <p>保存店家(共四个二维码到相册)</p>
          <p>二维码图片附有店家信息及功能说明,利于加微信时备注</p>
          <van-button color="#000000FF">
            <img src="../../assets/img/storePage/twocode.png" alt />
            <span>下载二维码</span>
          </van-button>
        </div>
      </div>
    </van-dialog>
    <!-- 手机号弹出框 -->
    <van-dialog v-model="phoneShow" z-index="999" :showConfirmButton="false" close-on-click-overlay>
      <div class="wrapper">
        <div class="tab-block">
          <van-tabs color="#ff5532">
            <van-tab title="电话1">
              <img src="../../assets/images_test/3.png" alt />
              <p>
                <a href="tel:1008611">1008611</a>
              </p>
              <van-button type="primary" size="normal" color="#4CC865FF">拨打</van-button>
            </van-tab>
            <van-tab title="电话2">内容 2</van-tab>
          </van-tabs>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import waterfallLayout from "./components/waterfallLayout";
export default {
  components: {
    waterfallLayout
  },
  data() {
    return {
      weMeidaLis: [
        {
          photo: require("../../assets/img/storePage/wemedia/公众号@3x.png"),
          name: "公众号"
        },
        {
          photo: require("../../assets/img/storePage/wemedia/微商相册@3x.png"),
          name: "微商相册"
        },
        {
          photo: require("../../assets/img/storePage/wemedia/短视频@3x.png"),
          name: "短视频"
        },
        {
          photo: require("../../assets/img/storePage/wemedia/直播@3x.png"),
          name: "直播"
        },
        {
          photo: require("../../assets/img/storePage/wemedia/其他@3x.png"),
          name: "其他"
        }
      ],
      onlineStoreList: [
        {
          photo: require("../../assets/img/storePage/onlineStore/有赞@3x.png"),
          name: "有赞微商城"
        },
        {
          photo: require("../../assets/img/storePage/onlineStore/其他@3x.png"),
          name: "网店"
        },
        {
          photo: require("../../assets/img/storePage/onlineStore/其他@3x.png"),
          name: "网店"
        }
      ],
      tabsList: ["全部", "上新", "热销", "推荐"],
      active: 0,
      // 当前滑动距离
      scrollTop: 0,
      btnFlag: false,
      // 微信显示
      show: false,
      phoneShow: false,
      phoneActive: 0
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    // 点击图标回到顶部,放一个加湿器,有滑动效果
    backTop() {
      let that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 计算距离顶部的高度,当高度大于500显示回到顶部图标,小于500则隐藏
    scrollToTop() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 300) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    openWechat() {
      this.show = true;
    },
    openPhone() {
      this.phoneShow = true;
    }
  }
};
</script>

<style lang="less" scoped>
.scrollTop-wrap {
  position: relative;
  .go-top {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 666;
    width: 40px;
    height: 40px;
  }
}
.shop-details {
  padding: 12px;
  width: 100%;
  .shop-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shop-head-l {
      display: flex;
      align-items: center;
    }
    .shop-head-r {
      display: flex;
      height: 28px;
      width: 83px;
      font-size: 20px;
      align-items: center;
      padding: 0 2px;
      border-radius: 15px;
      background-color: #00000080;
      justify-content: space-around;
      .line {
        width: 2px;
        height: 15px;
        border: 1px solid #fff;
        /deep/.van-icon {
          font-size: 20px;
        }
      }
    }
  }
  .shop-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 5px;
    .shop-type {
      display: flex;
      align-items: center;
      /deep/.van-tag--default {
        margin-right: 6px;
      }
    }
    .shop-borwse {
      font-size: 12px;
      color: #787878ff;
      margin-right: 5px;
    }
  }
  .custom-tag {
    .van-tag {
      margin-right: 10px;
    }
  }
  // 轮播图
  .slideshow {
    margin-top: 15px;
    width: 350px;
  }
  /deep/ .van-swipe__track {
    height: 197px;
  }
  img {
    width: 350px;
    height: 197px;
    width: 100%;
    height: 100%;
  }

  .shop-site {
    margin-top: 15px;
    display: flex;
    width: 100%;
    height: 85px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #eeeeee;
    align-items: center;
    justify-content: space-between;
    p {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
    }
    .contact-way {
      width: 115px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .van-icon {
        margin-bottom: 5px;
        font-size: 23px;
      }
      .image-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        img {
          width: 23px;
          margin-bottom: 5px;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
// 自媒体板块
.we-media {
  padding: 12px;
  .media-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .media-head-l {
      color: #000000ff;
      font-size: 22px;
      font-weight: 600;
    }
    .media-head-r-text {
      color: #787878ff;
      font-size: 16px;
    }
    div {
      display: flex;
      align-items: center;
    }
  }
  img {
    width: 25px;
  }
}
// 商店简介
.shop-brief {
  font-size: 12px;
  color: #787878;
  margin-top: 12px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
// 中间灰色部分
.midfeather {
  background-color: #eeeeeeff;
  width: 100%;
  height: 9px;
  margin-top: 10px;
}
// 微信弹出框
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 310px;
    height: 290px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
    }
    p {
      color: #000000ff;
      font-size: 13px;
      &:nth-child(3) {
        text-align: center;
        width: 175px;
        font-size: 13px;
        color: #787878ff;
      }
    }
    /deep/ .van-button {
      width: 139px;
      border-radius: 20px;
      height: 33px;
      .van-button__text {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        span {
          font-size: 15px;
        }
      }
    }
  }
  .tab-block {
    width: 310px;
    height: 330px;
    /deep/.van-tabs--line {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-tabs__content {
      width: 100%;
      height: 280px;
    }
    /deep/.van-tab__pane {
      width: 100%;
      height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    img {
      width: 80px;
      height: 80px;
      border-radius: 40px;
    }
    p {
      font-size: 13px;
      color: #787878ff;
    }
    .van-button {
      width: 139px;
      border-radius: 20px;
      span {
        font-size: 15px;
      }
    }
  }
}
// 苹果弹出框
</style>